<template>
  <div class='container'>
    <div class='top'>
      <a class='logo' href='/home'></a>
      <ul>
        <li :class="title ? '抑郁云官网' : first">
          <router-link to='/home'>
            发现音乐
          </router-link>
          <sub v-show='title === "抑郁云官网"'></sub>
        </li>
        <li :class="title ? '我的音乐' : first">
          <router-link to='/mymusic'>
            我的音乐
          </router-link>
          <sub v-show='title === "我的音乐"'></sub>
        </li>
        <li :class="title ? '我的朋友' : first">
          <router-link to='/firend'>
            朋友
          </router-link>
          <sub v-show='title === "我的朋友"'></sub>
        </li>
        <li :class="title ? '商城' : first">
          <router-link to='/shop'>
            商城
          </router-link>
          <sub v-show='title === "商城"'></sub></li>
        <li :class="title ? '音乐人' : first">
          <router-link to='/musician'>
            音乐人
          </router-link>
            <sub v-show='title === "音乐人"'></sub>
         </li>
        <li :class="title ? '下载页面' : first">
          <router-link to='/download'>
            下载页面
          </router-link>
            <sub v-show='title === "下载页面"'></sub> </li>
      </ul>
      <div class='right' @mouseout='to'>
        <input ref='placeholder' placeholder='音乐/视频/电台/用户' v-model='name' @keyup.enter='search' id='for' type='text'>
        <label for='for'></label>
      </div>
      <a href='' class='right_end'>创作者中心</a>
      <a href='javascript:;' v-if='!this.$store.state.user.show' @click='loginshow' class='end-to'>登录</a>
      <div v-else class='login'>
        <img :src='$store.state.user.avatarUrl' alt=''>
        <a href=''></a>
        <div class='listshow'>
          <ul>
            <li>
              <i></i>
              <a href='#'>我的主页</a>
            </li>
            <li><i></i><a href='#'>我的消息</a></li>
            <li><i></i><a href='#'>我的等级</a></li>
            <li><i></i><a href='#'>vip会员</a></li>
            <li><i></i><a href='#'>个人设置</a></li>
            <li><i></i><a href='#'>实名认证</a></li>
            <li><i></i><a @click='getout' href='javascript:;'>退出登录</a></li>
          </ul>
        </div>
      </div>


    </div>
  </div>
</template>

<script>
import axios from 'axios'
import config from '@/network/config'
export default {
  name: 'Top',
  data() {
    return {
      sub: false,
      url: config.url,
      name: '',
      title:this.$route.meta.title
    }
  },
  methods: {
    //登录框出现
    loginshow() {
      if (this.$route.meta.name !== '登录') {
        this.$router.push('/home/login')
        this.$store.commit('login/show')
      } else {
        this.$store.commit('login/show')
      }
    },
    async search() { //搜索
      let data = await axios.get(`${this.url}/search?keywords=${this.name}`)
      var list = data.data.result.songs
      var newlist = []
      for (let i = 0; i < list.length; i++) {
        newlist.push(list[i])
      }
      this.$store.commit('search/getSearch', newlist)
      this.$store.commit('search/getSearchName', this.name)
      this.$router.push('/search/song?search='+this.name)
    },
    getout() {  //退出登录清除 localStorage
      window.localStorage.clear()
      this.$store.commit('user/login')
      // this.$store.commit('login/show')
    },//退出登录
    to() {
      this.falg = !this.falg
    },
  },
  created() {
  },
  mounted() {

  },
  updated() {

  }

}
</script> 

<style scoped lang='less'>


//-webkit-input-placeholder 样式
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
  font-size: 12px;
  color:#999;
}

.right:hover label {
  display: none;
}

.login:hover .listshow {
  display: block;
}

.listshow {
  display: none;
}

.listshow ul li {
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  line-height: 25px;
}

.login ul li i {
  margin-top: 2px;
  margin-right: 5px;
}

.login ul li:nth-child(1) i {
  background: url("../../assets/images/toplist.png")0 -80px no-repeat;
  float: left;
  width: 18px;
  height: 18px;
}

.login ul li:nth-child(2) i {
  background: url("../../assets/images/toplist.png")-20px -120px no-repeat;
  float: left;
  width: 18px;
  height: 18px;
}

.login ul li:nth-child(3) i {
  background: url("../../assets/images/toplist.png")0 -221px no-repeat;
  float: left;
  width: 18px;
  height: 18px;
}

.login ul li:nth-child(4) i {
  background: url("../../assets/images/toplist.png")0 -120px no-repeat;
  float: left;
  width: 18px;
  height: 18px;
}

.login ul li:nth-child(5) i {
  background: url("../../assets/images/toplist.png")0 -140px no-repeat;
  float: left;
  width: 18px;
  height: 18px;
}

.login ul li:nth-child(6) i {
  background: url("../../assets/images/toplist.png")-20px -142px no-repeat;
  float: left;
  width: 18px;
  height: 18px;
}

.login ul li:nth-child(7) i {
  background: url("../../assets/images/toplist.png")0 -200px no-repeat;
  float: left;
  width: 18px;
  height: 18px;
}

.login ul li a {
  color: #ccc;
  display: flex;
  font-size: 12px;
  justify-content: center;
}

.login ul li:hover {
  background: #353535;
  text-decoration: none;
  color: white;
}

.login ul li:hover a {
  color: white;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.login ul {
  width: 160px;
  height: 260px;
  background-color: #2B2B2B;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  position: absolute;
  right: -380%;
  top: 90%;
}

.container .login {
  position: absolute;
  width: 20px;
  height: 45px;
  z-index: 10;
  top: 29%;
  right: 21.5%;
}

.container .login img {
  width: 30px;
  height: 30px;
  border-radius: 100%;
}

.container {
  position: relative;
}

sub {
  display: block;
  position: absolute;
  left: 50%;
  top: 64px;
  width: 12px;
  height: 7px;
  margin-left: -6px;
  overflow: hidden;
  background: url("../../assets/images/topbar.png")-226px 0px;
  z-index: 10;
}

.container {
  width: 100%;
  height: 70px;
  background-color: #242424;
}

.top {
  width: 1100px;
  height: 100%;
  margin: 0 auto;
  display: flex;
}

.top .logo {
  background: url("../../assets/images/topbar.png") no-repeat 0px 0px;
  height: 69px;
  width: 176px;
}

.top > ul {
  display: flex;
  align-items: center;
  margin-left: 2px;
}

.top > ul > li {
  width: 94px;
  height: 70px;
  position: relative;
}

.top > ul > li a {
  color: #ccc;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.top > ul > li a:hover {
  background-color: #000000;
  color: red;
}

.top a {
  font-size: 14px;
}

.first {
  background-color: #000000;
  color: red;
}

.top > ul > li .end::after {
  content: '';
  background: url("../../assets/images/topbar.png");
  display: block;
  position: absolute;
  top: 21px;
  left: 100px;
  width: 28px;
  height: 19px;
  background-position: -190px 0;
}

.right {
  background: url("../../assets/images/topbar.png")0px -99px no-repeat;
  margin-top: 19px;
  background-color: #fff;
  border-radius: 32px;
  width: 158px;
  height: 32px;
  position: relative;
  z-index: 3;
  margin-left: 58px;
}

.right input {
  background: transparent;
  border: none;
  outline: none;
  margin-left: 32px;
  margin-top: 7px;
  width: 73%;
}

.right label {
  position: absolute;
  color: #cccccc;
  left: 35px;
  top: 9px;
  font-size: 12px;
}

.right_end {
  width: 90px;
  height: 32px;
  margin: 19px 0 0 12px;
  box-sizing: border-box;
  border: 1px solid #4F4F4F;
  line-height: 33px;
  color: #ccc;
  border-radius: 20px;
  text-align: center;
  font-size: 12px;
  display: inline-block;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
}

.right_end:hover {
  color: white;
  border: 1px solid white;
}

.end-to {
  color: #eee;
  font-size: 12px;
  margin-top: 28px;
  margin-left: 10px;
}
</style>